<template>
	<view class="page">
		<u-navbar title="支付"></u-navbar>
		<!-- mask层 -->
		<view :class="['mask', twoshow ? '' : 'visible']"></view>
		<view :class="['mask', threeshow ? '' : 'visible']"></view>
		<!-- 第一 -->
		<view class="payone">
			<view class="bianhao">订单编号1266976373212</view>
			<view class="jine">￥{{realPay}}</view>
			<view class="shoukf">
				<view class="name">收款方</view>
				<view class="shanghu">maxbox数藏平台商户</view>
			</view>
			<button @click="twoshow = true" class="paybtn">立即支付</button>	
		</view>
		
		<!-- 第二 -->
		<view :class="['keyboard',twoshow ? '' : 'twoactive']">
			<view :class="['content']">
				<view class="title">
					<view class="close" @click="twoshow = false"><image src="../../static/close.png" /></view>
					<!-- <view class="center">请输入支付密码</view> -->
					<!-- <view class="close"></view> -->
				</view>
				<view class="pay-money">
					<view>maxbox数藏平台商户</view>
					<view class="money">￥ <text>{{realPay}}</text></view>
				</view>
				<view class="pay-way">
					<view>支付方式</view>
					<view class="pay-img"><image src="../../static/yue.png"/>余额</view>
				</view>
				<button @click="ThreeSteps" class="paytwobtn">确认支付</button>
			</view>
		</view>
		
		<!-- 第三 -->
		<view :class="['keyboard',threeshow ? '' : 'threeactive']">
			<view :class="['content']">
				<view class="title">
					<view class="close" @click="threeshow = false"><image src="../../static/close.png" /></view>
					<!-- <view class="center">请输入支付密码</view> -->
					<!-- <view class="close"></view> -->
				</view>
				<view class="pay-money">
					<view>maxbox数藏平台商户</view>
					<view class="money">￥ <text>{{realPay}}</text></view>
				</view>
				<view class="pay-way">
					<view>支付方式</view>
					<view class="pay-img"><image src="../../static/yue.png"/>余额</view>
				</view>
				<view :class="['code']">
					<view class="code-box">
						<block v-for="(item, index) in 6" :key="index">
							<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
						</block>
					</view>
					<input type="number" v-model="password" />
				</view>			
			</view>
			<!-- 键盘 -->
			<view :class="['jianpan']">
				<block v-for="(item, index) in 9" :key="index">
					<view class="keyboard-item" @click="key(index + 1)">{{index + 1}}</view>
				</block>
				<view class="keyboard-item hide"></view>
				<view class="keyboard-item" @click="key(0)"><text>0</text></view>
				<view class="keyboard-item delte" @click="del()"><image class="img" src="../../static/del.png" mode="aspectFill" :lazy-load="true"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				trantision: false,
				twoshow:false,
				threeshow: false,
				realPay:0
			};
		},
		onLoad(optins) {
			this.realPay = Number(optins.realPay).toFixed(2)
			// console.log(optins);
		},
		methods: {
			ThreeSteps(){
				this.twoshow = false
				this.threeshow = true
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						// console.log(this.password);
						// uni.showToast({	title: '输入完成' });
						this.$http({
							url: "api/pay/go_recharge",
							data: {
								num: this.realPay,
								paymode:'virtual',
								desc: '',
								address_id:'',
								// #ifdef H5
								client: 0,
								// #endif
								// #ifdef MP-WEIXIN
								client: 1,
								// #endif
								// #ifdef APP-PLUS
								client: 2,
								// #endif
							}
						}).then(res => {
							if (res.data.code == 1) {
								this.$tip.tip("支付成功", "success")
								setTimeout(() => {
									uni.redirectTo({
										url: '/pagesA/pages/my/paySuccess?realPay='+this.realPay
									})
								}, 700)
							} else {
								this.$tip.tip(res.data.msg)
							}
						
						}).catch(err => {});
						return;
					}
				}
			},
			clear() {
				this.password = '';
			},
			close() {
				this.show = false
				// this.password = '';
				// this.trantision = false;
				// this.$emit('close', false);
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100vw;
		height: 100vh;
		background: #F7F7F7;
	}
	input {
		display: none;
	}
	.payone{
		width: 100%;
		text-align: center;
		.bianhao{
			font-weight: bold;
			color: #111111;
			font-size: 30rpx;
			padding-top: 26rpx;
		}
		.jine{
			font-size: 72rpx;
			font-weight: 500;
			color: #111111;
		}
		.shoukf{
			height: 100rpx;
			margin: 40rpx 0;
			padding: 0 20rpx;
		  border: 1rpx solid #E6E6E6;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.paybtn{
			width: 712rpx;
			height: 93rpx;
			line-height: 93rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			background: #58BE6B;
			border-radius: 17rpx;
		}
	}
	.paytwobtn{
		width: 354rpx;
		height: 93rpx;
		line-height: 93rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 115rpx 0 140rpx;
		background: #58BE6B;
		border-radius: 17rpx;
	}
	.mask {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		transition: all 0.3s ease;
		background: rgba(102, 102, 102, 0.3);
		opacity: 1;
		z-index: 2;
		visibility: visible;
	}
	.visible {
		opacity: 0;
		z-index: 2;
		visibility: hidden;
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.twoactive {
		opacity: 0;
		bottom: -800rpx;
	}
	.threeactive {
		opacity: 0;
		bottom: -1000rpx;
	}
	.content {
		width: 100%;
		// height: 570rpx;
		border-radius: 15rpx 15rpx 0 0;
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		z-index: 2;
		opacity: 1;
		visibility: visible;
		transition: all 0.3s ease;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				// width: 560rpx;
				width: 100%;
				font-size: 32rpx;
					.center {
						color: #333;
						font-size: 32rpx;
					}
					.close {
						width: 50rpx;
						height: 50rpx;	
					}
					image {
						width: 100%;
						height: 100%;
					}
			}
			.pay-money {
				width: 100%;
				height: 240rpx;
				border-bottom: 1rpx solid #EBEBEB;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
					view {
						width: 100%;
						font-size: 30rpx;
						height: 80rpx;
						display: flex;
						font-weight: bold;
						justify-content: center;
						align-items: center;
					}
					.money {
						font-size: 45rpx;
						font-weight: 600;
						margin-bottom: 50rpx;
					}
					.money text {
						font-size: 60rpx;
						margin-left: 10rpx;
					}
			}
			.pay-way {
				width: 100%;
				height: 85rpx;
				padding: 0 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #8A8A8A;
				font-size: 28rpx;
					.pay-img {
						color: #333333;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					image {
						width: 35rpx;
						height: 35rpx;
						margin-right: 10rpx;
					}
			}
			.code {
				width: 100%;
				height: 120rpx;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				.code-box {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					// border: 1px solid #d0d0d0;
					.code-box-item {
						width: 76rpx;
						height: 76rpx;
						background: #F2F2F2;
						font-size: 40rpx;
						line-height: 75rpx;
						text-align: center;
					}
					.code-box-item:not(:last-child) {
						margin-right: 16rpx;
						// border-right: 1px solid #d0d0d0;
					}
				}
			}
	}
	.jianpan{
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		width: 100%;
		background: #EBEBEB;
		.keyboard-item {
			box-sizing: border-box;
			width: 250rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #fff;
			font-size: 40rpx;
			color: #333;
			border: 1rpx solid #EBEBEB;
			// border-top:none;
			border-left:none;
		}
		.keyboard-item:active{
			background-color: #E5E5E5;
		}
		.hide {
			opacity: 0;
		}
		.delte {
			background: none;
			box-shadow: none;
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.isIphone {
		padding-bottom: 68rpx !important;
	}
</style>
